<template>
  <div id="topSearch">
    <!-- <el-row :gutter="16">
      <el-col :span="7"> -->
    <!-- <cs-label label-text="报表类型" width="438">
      <el-select v-model="queryInfo.formType" placeholder="请选择" size="small">
        <el-option
          v-for="item in formTypeOpt"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </cs-label> -->
    <!-- </el-col>
      <el-col :span="7"> -->
    <cs-label label-text="时间范围" width="438">
      <el-date-picker
        v-model="queryInfo.times"
        :type="isTime ?'datetimerange':'daterange'"
        :picker-options="isTime ? pickerOptions1 : pickerOptions2"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        size="small"
        :style="{ width: '2000px' }"
        value-format="yyyy-MM-dd HH:mm:ss"
        @blur="pickerMinDate = 0"
        :default-time="['00:00:00', '00:00:00']"
      >
      </el-date-picker>
    </cs-label>
    <!-- </el-col>
      <el-col :span="7"> -->
    <cs-label label-text="站点" width="438">
      <el-select v-model="queryInfo.point" placeholder="请选择" size="small" clearable>
        <el-option
          v-for="item in pointList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </cs-label>
    <!-- </el-col>
      <el-col :span="3"> -->
    <!-- <el-button size="small" type="primary" plain @click="sendQuery">查询</el-button> -->
    <cs-btn btnText="查询" @click.native="sendQuery" type="search"></cs-btn>
    <!-- </el-col>
    </el-row> -->
  </div>
</template>

<script>
import _ from 'lodash'

import csLabel from '@/components/cs-label/cs-label.vue'
import csBtn from '@/components/cs-btn/cs-btn.vue'

export default {
  name: 'Top',
  props: {
    pointList: {
      type: Array,
      default() {
        return [
          {
            value: 1,
            label: '海城区'
          },
          {
            value: 2,
            label: '银海区'
          },
          {
            value: 3,
            label: '铁山港区'
          },
          {
            value: 4,
            label: '合浦县'
          }
        ]
      }
    },
    isTime: {
      type: Boolean,
      default: false
    }
    // formTypeOpt: {
    //   type: Array,
    //   default() {
    //     return [
    //       {
    //         value: 1,
    //         label: '日报'
    //       },
    //       {
    //         value: 2,
    //         label: '周报'
    //       },
    //       {
    //         value: 3,
    //         label: '月报'
    //       },
    //       {
    //         value: 4,
    //         label: '季报'
    //       },
    //       {
    //         value: 5,
    //         label: '年报'
    //       }
    //     ]
    //   }
    // }
  },
  components: {
    csLabel,
    csBtn
  },
  data() {
    const that = this
    return {
      queryInfo: {
        // formType: '',
        times: '',
        point: ''
      },
      pickerMinDate: 0,
      pickerOptions1: {
        onPick({ minDate, maxDate }) {
          if (minDate) {
            that.pickerMinDate = minDate.getTime()
          }
          if (maxDate) {
            that.pickerMinDate = 0
          }
        },
        disabledDate(time) {
          if (that.pickerMinDate !== 0) {
            return (
              that.pickerMinDate - 3600 * 1000 * 48 > time.getTime() ||
              that.pickerMinDate + 3600 * 1000 * 48 < time.getTime()
            )
          } else {
            return false
          }
        }
      },
      pickerOptions2: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一年',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  watch: {
    'queryInfo.times'(newValue) {
      if (newValue === null) {
        this.$emit('query-info', this.queryInfo)
      }
    },
    'queryInfo.point'(newValue) {
      if (newValue === '') {
        this.$emit('query-info', this.queryInfo)
      }
    }
  },
  methods: {
    sendQuery: _.throttle(function () {
      this.$emit('query-info', this.queryInfo)
    }, 1000)
  }
}
</script>

<style lang="less" scoped>
#topSearch {
  display: flex;
}

.el-select {
  width: 2000px;
}

/* 更改el-select下拉框图标的行高 */
.el-select /deep/ .el-input__icon {
  line-height: 32px;
}

/* 更改el-select下拉框的图标 */
.el-select /deep/ .el-icon-arrow-up:before {
  content: '\e78f';
}

/deep/ .el-input__inner {
  border-radius: 0;
}
</style>
